<template>
    <el-container style="    overflow: hidden;">
        <el-aside :width="leftopen == true ? '200px' : '47px'"
            class="ishide">
            <LeftNav :index="index"></LeftNav>
        </el-aside>

        <el-main class="mainbody">
            <el-header class="main_header"
                style="padding-bottom:0">
                <HeadNav @leftMenu="getLeftMenu"
                    :adminObj="adminObj"></HeadNav>
            </el-header>
            <el-container style="min-height: auto;overflow: auto; background-color: #f5f7f9;">
                <!-- <transition :name="transitionName"> -->
                <!-- <keep-alive> -->
                <router-view class="transitionBody"></router-view>
                <!-- </keep-alive> -->
                <!-- </transition> -->
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
import HeadNav from "@/components/HeadNav.vue";
import LeftNav from "@/components/LeftNav.vue";
import { mapState } from "vuex";
export default {
    components: {
        HeadNav,
        LeftNav
    },
    data () {
        return {
            index: "",
            adminObj: "",
            // transitionName: "el-fade-in-linear"
            transitionName: ""
        };
    },
    computed: {
        ...mapState({
            leftopen: state => state.leftopen || false
        })
    },
    watch: {},
    methods: {
        menuchange () {
            this.$store.commit("setLeftOpen", !this.leftopen);
        },
        getLeftMenu (index) {
            this.index = index;
        },
        getSendObj (obj) {
            this.adminObj = obj;
        }
    }
};
</script>
<style lang="less" scoped>
.mainbody {
    background: #f9fafe;
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    overflow: hidden;
}
.el-aside {
    background-color: #fff;
}
.transitionBody {
    transition: all 0.5s ease-in; /*定义动画的时间和过渡效果*/
}

.transitionLeft-enter,
.transitionRight-leave-active {
    -webkit-transform: translate(100%, 0);
    transform: translate(-100%, 0);
    /*当左滑进入右滑进入过渡动画*/
}

.transitionLeft-leave-active,
.transitionRight-enter {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.ishide {
    overflow-x: hidden;
    transition: 0.2s ease-out;
    -webkit-transition: 0.2s ease-out;
}
</style>
